
<template>
  <div class="home">
    <div class="ck-editor">
      <ckeditor
        ref="editor"
        v-model="editorData"
        :editor="editor"
        :config="editorConfig"
        :read-only="isReadOnly"
        @ready="onReady"
      />
    </div>
    <!--<button v-on:click="emptyEditor()" v-if="!isReadOnly">清空内容</button>-->
    <!-- <button v-show="!isReadOnly" @click="emptyEditor()">清空内容</button> -->
  </div>
</template>

<script>
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document'
// import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn' // 中文包
// import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice'

const upload = require('../../utils/upload')
export default {
  props: {
    pastEditor: {
      type: String,
      default: ''
    },
    isReadOnly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      editor: DecoupledEditor,
      editorData: this.pastEditor,
      editorConfig: {
        // 编辑器的配置
        language: 'zh-cn', // 中文
        extraPlugins: [upload.MyCustomUploadAdapterPlugin],
        // extraPlugins: '',
        pasteFromWordRemoveFontStyles: false,
        pasteFromWordRemoveStyles: false
      },
      readyEditor: null
    }
  },
  watch: {
    pastEditor: function(newVal, oldVal) {
      this.editorData = newVal
    },
    editorData: function(newVal, oldVal) {
      this.$emit('update:pastEditor', newVal)
    }
  },
  mounted() {

  },
  methods: {
    // 设置禁用
    setDisabled(isReadOnly) {
      const vm = this
      vm.readyEditor.isReadOnly = isReadOnly
    },
    onReady(editor) {
      this.readyEditor = editor
      // 在可编辑区域之前插入工具栏。
      editor.isReadOnly = this.isReadOnly// 将编辑器设为只读
      editor.ui.getEditableElement().parentElement.insertBefore(
        editor.ui.view.toolbar.element,
        editor.ui.getEditableElement()
      )
    },

    emptyEditor() {
      this.editorData = ''
    }
  }
}
</script>
<style scoped>
  .ck-editor__editable {
    min-height: 400px;
    border: 1px solid #ccc !important;
  }
  .ck-editor__editable >>> p{
    width: 930px !important;
  }
  .ck-editor {
    font-size: 15px !important;

  }

  .ck-editor >>> img {
    width: 100%;
    height: 100%
  }

  .ck-editor >>> ul {
    padding-left: 40px !important;
  }

  .ck-editor >>> ul > li {
    list-style: disc !important;
  }

  .ck-editor >>> ol {

    padding-left: 40px !important;

  }

  .ck-editor >>> ol > li {
    list-style: decimal !important;
  }
</style>
